<template>
  <div class="login">
    <el-row>
      <el-col :xs="1" :sm="5" :md="7" :lg="8" :xl="10">
        <span class="invisible">1</span>
      </el-col>
      <el-col :xs="22" :sm="14" :md="10" :lg="8" :xl="4">
        <div class="title">
          <h1>
            <img src="@/assets/logo.png" alt>
            <span>{{appName}}</span>
          </h1>
        </div>
        <div class="loginBox">
          <div class="header">
            <div class="round">
              <el-button type="warning" size="mini" circle></el-button>
              <el-button type="success" size="mini" circle></el-button>
              <el-button type="danger" size="mini" circle></el-button>
              <el-button type="primary" size="mini" circle></el-button>
              <a :href="$store.state.serviceUrl" target="_blank">
                <el-tooltip class="item" effect="dark" content="联系客服" placement="top">
                  <i class="iconfont icon-kefu"></i>
                </el-tooltip>
              </a>
            </div>
          </div>
          <div class="avatarBox">
            <img src="@/assets/avtar.png" alt="avatar">
          </div>
          <div class="inputForm">
            <form>
              <div class="formGroup">
                <label class="frontLabel">
                  <i class="iconfont icon-yonghu"></i>
                </label>
                <input
                  type="text"
                  class="inputTxt"
                  placeholder="请输入登陆账户"
                  onfocus="this.placeholder=''"
                  onblur="this.placeholder='请输入登陆账户'"
                  v-model="loginInfo.username"
                >
              </div>
              <div class="formGroup">
                <label class="frontLabel">
                  <i class="iconfont icon-mima"></i>
                </label>
                <input
                  type="password"
                  class="inputTxt"
                  placeholder="请输入登陆密码"
                  onfocus="this.placeholder=''"
                  onblur="this.placeholder='请输入登陆密码'"
                  v-model="loginInfo.password"
                >
              </div>
              <div class="btnGroup">
                <button class="loginBtn" @click.prevent="login" :disabled="loading">登陆</button>
              </div>
            </form>
          </div>
        </div>
      </el-col>
      <el-col :xs="1" :sm="5" :md="7" :lg="8" :xl="10">
        <span class="invisible">2</span>
      </el-col>
    </el-row>
    <div class="footer">
      <span>Copyright © 2019. {{appName}} All rights reserved.</span>
      <a class="clra" @click="visitIndex">联系客服</a>
    </div>
  </div>
</template>

<script>
import {setCookie} from '@/utils/cookie'
export default {
  name: "login",
  components: {},
  data() {
    return {
      appName: this.$store.state.appName,
      appUrl: this.$store.state.appUrl,
      loginInfo: {
        username: "",
        password: ""
      },
      loading: false
    };
  },
  methods: {
    login() {
      if (this.validateLogin()) {
        //数据校验
        this.$api.login.Login(this.loginInfo).then(res => {
          this.$message.success('登陆成功');
          //setCookie('token', res.data.token, 1)
          this.$router.push({ path: "/" });
        });
      }
    },
    validateLogin() {
      const userName = this.loginInfo.userName;
      const password = this.loginInfo.password;
      if (userName === "") {
        this.$message.error("用户名不能为空");
        return false;
      } else if (password === "") {
        this.$message.error("密码不能为空");
        return false;
      }
      return true;
    },
    visitIndex() {
      window.open(this.$store.state.serviceUrl);
    }
  },
  created() {
    //未登录，提示
    // let userName = window.localStorage.getItem('userName');
    // if(userName === 'null'){
    //   this.$message.error('请先登录才能进入后台');
    // }
  }
};
</script>

<style lang="scss" scoped>
.login {
  padding-top: 50px;
  padding-bottom: 50px;
  width: 100%;
  height: 100%;
  min-height: 700px;
  background: url(../../assets/loginBg.jpg) no-repeat 0px 0px;
  background-size: 100% 100%;
  .title {
    text-align: center;
    height: 100px;
    h1 img,
    h1 span {
      line-height: 100px;
      display: inline-block;
      vertical-align: middle;
    }
  }
  .loginBox {
    border-radius: 10px;
    background-color: #2b2b36;
    .header {
      .round {
        position: relative;
        text-align: center;
        height: 60px;
        border-radius: 10px 10px 0 0;
        background-color: #23232e;
        .el-button {
          margin-top: 20px;
          line-height: 100px;
        }
        .icon-kefu {
          position: absolute;
          font-size: 30px;
          top: 12px;
          right: 30px;
          color: white;
        }
        .icon-kefu:hover {
          color: #e63a76;
        }
      }
    }
    .avatarBox {
      text-align: center;
      height: 160px;
      img {
        margin-top: 40px;
      }
    }
    .inputForm {
      .formGroup {
        margin: 0 auto;
        width: 95%;
        border-bottom: 1px solid#484856;
        .frontLabel {
          i {
            color: #9199aa;
            font-size: 20px;
          }
        }
        .inputTxt {
          color: #9199aa;
          outline: none;
          font-size: 18px;
          height: 60px;
          line-height: 60px;
          width: 70%;
          padding: 0 20px;
          background-color: transparent;
          border: none;
        }
        .passwordTxt {
          color: #dd3e3e;
        }
        .passwordTxt::placeholder {
          color: #dd3e3e;
        }
      }
    }
    .btnGroup {
      .loginBtn {
        cursor: pointer;
        margin-top: 50px;
        font-size: 25px;
        color: #fff;
        height: 70px;
        width: 100%;
        border-radius: 0 0 10px 10px;
        background-color: #3ea751;
        border: none;
        outline: none;
      }
      .loginBtn:hover {
        background-color: #e63a76;
        transition: 1s;
      }
    }
  }
  .footer {
    margin-top: 50px;
    color: #fff;
    font-size: 15px;
    line-height: 20px;
    font-weight: 700;
    text-align: center;
    span {
      letter-spacing: 3px;
    }
    a {
      color: #e63a76;
    }
    a:hover {
      transition: 0.5s;
      color: #3ea751;
    }
  }
}
</style>